<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar
    class="my-nav-bar"
  title="登入"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
/>

<!-- 输入框表单 -->
<van-form @submit="onSubmit">
  <van-field
    v-model="mobile"
    name="mobile"
    required
    label="手机号"
    placeholder="请输入手机号"
     :rules="[
          { required: true, message: '请填写手机号' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式不对'
          }
        ]"
  />
   <van-field
    v-model="code"
    name="code"
    required
    label="验证码"
    placeholder="请输入验证码"
     :rules="[
          { required: true, message: '验证码没有写哦!' },
          { pattern: /\d{6}/, message: '验证码格式不对' }
        ]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit"
     :disabled='isLoading'
     :loading='isLoading'
     loading-text="登入中..."
     >提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
// 导出接口
import { getLogin } from '../user/user.js'

import { saveToken } from '../../../utils/token.js'

export default {
  name:'login',
  data() {
    return {
      mobile: '',
      code:'',
      isLoading:false
    };
  },
   methods: {
       onSubmit(values) {
      console.log('submit', values);
       this.isLoading=true
    // 调用登入接口
      getLogin(values)
      .then(res=>{
        console.log(res);
        // 弹窗提示
        this.$toast.success('登入成功');
          saveToken(res.data.data)
          // 跳转首页
           this.$router.push({ path: '/home' })
      })
      .catch(err=>{
        this.$toast.fail('登入失败');
      })
      .then(()=>{
       setInterval(() => {
          this.isLoading=false
       }, 500)
      })

    },
    },
}
</script>

<style lang="less">
.my-nav-bar{
  .van-nav-bar__content{
    background-color:#3196fa;
  }
 .van-nav-bar__left{
   .van-icon-arrow-left,.van-nav-bar__text{
     color: #fff;
   }
 }
 .van-nav-bar__title{
   color: #fff;
 }
}

</style>

